<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>欢迎来到购物车界面</title>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/compound.css" />
		<link rel="stylesheet" type="text/css" href="h-ui-font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.css" />
		<script src="js/swiper.min.js" type="text/javascript"></script>
		<style type="text/css">
			a {
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<!--//最外侧的div-->
		<div id="shopping">
			<!--定位导航-->
			<div id="head-top" class="w">
				<div id="head-top-content" class="h">
					<ul class="head-top-ul1 h">
						<li><i class="iconfont icon-hongjiuchengiconhongjiucheng icon-home"></i>当前城市：</li>
						<li class="head-display-par" id="head-display-a">
							<i class="iconfont icon-dangqianchengshi  icon-down"></i>
							<a href="javascript:;" class="head-a">北京</a>
							<div id="head-display">
								<p class="head-display-city">
									<a href="javascript:;">北京</a>
									<a href="javascript:;">上海</a>
									<a href="javascript:;">天津</a>
									<a href="javascript:;">重庆</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">山西</a>
									<a href="javascript:;">河北</a>
									<a href="javascript:;">河南</a>
									<a href="javascript:;">辽宁</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">吉林</a>
									<a href="javascript:;">陕西</a>
									<a href="javascript:;">深圳</a>
									<a href="javascript:;">江苏</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">山东</a>
									<a href="javascript:;">安徽</a>
									<a href="javascript:;">浙江</a>
									<a href="javascript:;">福建</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">湖北</a>
									<a href="javascript:;">湖南</a>
									<a href="javascript:;">广东</a>
									<a href="javascript:;">江西</a>
								</p>
								<p class="head-display-city">
									<a href="javascript:;">海南</a>
									<a href="javascript:;">贵州</a>
									<a href="javascript:;">宁夏</a>

									<a href="javascript:;">黑龙江</a>

								</p>
							</div>
						</li>
						<li>你好，欢迎进入!</li>
						<li>
							<a class="head-a" href="login.html">登录</a>
						</li>
						<li>
							<a class="head-a" href="register.html">注册</a>
						</li>
					</ul>

					<ul class="head-top-ul2 h">
						<li class="head-position-par">
							<a class="head-a" href="javascript:;">我的账户</a><i class="iconfont icon-arrowDown icon-down"></i>
							<div class="head-myself">
								<p class="head-myself-children">
									<a href="order.html">我的订单</a>
								</p>
								<p class="head-myself-children">
									<a href="javascript:;">我的资料</a>
								</p>
								<p class="head-myself-children">
									<a href="javascript:;">我的收藏</a>
								</p>
								<p class="head-myself-children">
									<a href="shopping.html">我的购物车</a>
								</p>
								<p class="head-myself-children">
									<a href="javascript:;">我的关注</a>
								</p>
							</div>
						</li>
						<li><i class="iconfont icon-tubiaoshangcheng icon-down"></i>
							<a class="head-a" href="shopping.html">购物车<span class="head-number">1</span>件</a>
						</li>
						<li>
							<a class="head-a" href="javascript:;">客户服务</a>
						</li>
						<li>
							<a class="head-a" href="javascript:;">大客户</a>
						</li>
					</ul>
				</div>
			</div>
			<!--//这是logal和搜索框-->
			<div id="header-logal">
				<div class="header-logal-logo">

				</div>
				<div class="header-logal-search">
					<div class="search-kuang">
						<div contenteditable="true" class="search-kuang-zuo"> </div>
						<div class="search-kuang-you">搜索</div>

					</div>

				</div>
			</div>
			<div class="head-border w"></div>

			<!--//受天气影响提示的部分-->
			<div id="shopping-tishi">
				<!--受天气影响提示居中的部分-->
				<div class="shopping-tishi">
					<i style="color: #A40E59;" class="iconfont icon-warning"></i>
					<a href="#" style="color: black;">由于近期我国部分地区降温较快，为了保障酒得品质，</a>
					<a href="#" style="color: red;">订单自2017年起3月12起做出以下调整</a>
				</div>
			</div>
			<!--//以下是空空的购物车的那栏-->
			<div id="shopping-gouwuche">

				<a href="#"><img id="gouwucheimg" src="img/shopping.png" /></a>
				<div id="shopping-addshangpin">

					<div id="weidenglu">
						您还没有登录，登陆后购物车的内容将存到你的账号中！
						<a href="login.html">立即登录</a>
					</div>
					<div id="sendhuowu">
						送货至：
						<div id="threeji">
							<div id="distpicker2">
								<select>北京市</select>
								<select>北京市</select>
								<select>东城区</select>
							</div>
						</div>
					</div>
					<!--满赠那栏的-->
					<div id="manzengyouhui">
						<!--//购物车里边的内容-->
						<div id="gouwu-liebiao">
							<div class="list"><input type="checkbox" />全选</div>
							<div class="list">商品图片</div>
							<div class="list">商品名称</div>
							<div class="list"></div>
							<div class="list"></div>
							<div class="list"></div>
							<div class="list">单价</div>
							<div class="list">数量</div>
							<div class="list">合计</div>
							<div class="list">操作</div>

						</div>

						<div class="list11"><input type="checkbox" />选中</div>
						<div class="list11">
							<div id="list-img">
								<img src="img/1470363971030842_M.jpg" />
							</div>
						</div>
						<div class="list11">加州乐事葡萄酒</div>
						<div class="list11"></div>
						<div class="list11"></div>
						<div class="list11"></div>
						<div class="list11">
							<p>￥51</p>
						</div>

						<div class="list11 scroll-btn"><span class="glyphicon scroll-chevron glyphicon-chevron-up"></span><input style="width: 20px; height: 20px;" class="scroll-txt" type="text" value="1" readonly><span class="glyphicon scroll-chevron glyphicon-chevron-down"></span> </div>
						<div class="list11">51.00</div>
						<div class="list11" style="line-height: 30px;">
							<p style="margin-top: 30px;">收藏</p>
							<p style="margin-top: -20px;">删除</p>
						</div>
					</div>
					<!--去结算那栏的-->
					<div id="gouwu-qujiesuan">
						<div class="gouwu-jiesuan-1"> <input type="checkbox" />全选</div>
						<div class="gouwu-jiesuan-2">
							<a>删除选中商品</a>
						</div>
						<div class="gouwu-jiesuan-3">商品数量：<span>1</span>件 </div>
						<div class="gouwu-jiesuan-4">为您节省：<span>0.00</span> </div>
						<div class="gouwu-jiesuan-5">商品总价(不含运费)：￥<span>0.00</span></div>
						<div class="gouwu-jiesuan-6"><span id="jiezhang">去结算</span> </div>
					</div>
				</div>
			</div>
			<!--//以下是精品推荐那一栏-->
			<!--这是放滚动栏的那个容器-->
			<div id="shopping-jingpin">
				<div id="jingpin-1-1" class="jingpin-1">精品推荐
					<div class="tuijian-1" style="position: absolute; top: 40px; left: 60px;">

						<!--//以下为中间的商品列表-->
						<div class="shangpin-html">
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
						</div>
						<!--//这是隐藏的那个div-->
						<div class="shangpin-html-html">
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
							<div class="shangpi-html-1">
								<!--//以下为酒的商品图片-->
								<div class="shopping-wine">
									<a href="#"><img src="img/1473328187799281_MD.jpg" /></a>
								</div>
								<!--//以下为酒的描述-->
								<div class="wine-miaoshu">
									<a href="#">奔富BIN28卡琳娜设拉子</a><br />
									<strong>￥259</strong>
									<div class="addshopping">
										<a href="#">加入购物车</a>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="jingpin-1">我的收藏
					<div class="tuijian-1" style="display: none; position: absolute; top: 40px; left: -40px; color: black;">我的收藏</div>
				</div>
				<div class="jingpin-1">最近预览
					<div class="tuijian-1" style="display: none; position: absolute; top: 40px; left: -140px;">暂无商品</div>
				</div>

			</div>
			<!--//以下是精品推荐的商品-->
			<div id="shopping-jingpinshangpin">
				<!--//以下为左侧的箭头-->
				<div class="shangpin-zuojiantou">
					<i class="iconfont icon-jiantou icon-zuojiantou"></i>
				</div>
				<!--//以下为右侧的箭头-->
				<div class="shangpin-youjiantou">
					<i class="iconfont icon-jiantou1 icon-youjiantou"></i>
				</div>
			</div>
			<!--//底部-->
			<div id="footer">
				<!--多快好省-->
				<div class="footer-dkhs">
					<div class="footer-dkhs-img"><img src="img/service_items_1.png" /></div>
					<div class="footer-dkhs-img"><img src="img/service_items_2.png" /></div>
					<div class="footer-dkhs-img"><img src="img/service_items_3.png" /></div>
					<div class="footer-dkhs-img"><img src="img/service_items_4.png" /></div>
				</div>
				<!--友情链接显示-->
				<div id="footer-top">
					<div class="fl footrer-top-content">
						<h5 class="footer-h5 mb5"><a href="javascript:;">新手上路</a></h5>
						<ul>
							<li>
								<a href="javascript:;">新用户演示</a>
							</li>
							<li>
								<a href="javascript:;">会员积分计划</a>
							</li>
							<li>
								<a href="javascript:;">会员等级规则</a>
							</li>
							<li>
								<a href="javascript:;">售后服务政策</a>
							</li>
							<li>
								<a href="javascript:;">发票制度</a>
							</li>
						</ul>
					</div>
					<div class="fl footrer-top-content">
						<h5 class="footer-h5 mb5"><a href="javascript:;">付款方式</a></h5>
						<ul>
							<li>
								<a href="javascript:;">支付方式</a>
							</li>
							<li>
								<a href="javascript:;">支付常见问题</a>
							</li>
							<li>
								<a href="javascript:;">激活礼品卡</a>
							</li>
							<li>
								<a href="javascript:;">我买卡</a>
							</li>
							<li>
								<a href="javascript:;">电子礼品卡说明</a>
							</li>
						</ul>
					</div>
					<div class="fl footrer-top-content">
						<h5 class="footer-h5 mb5"><a href="javascript:;">配送信息</a></h5>
						<ul>
							<li>
								<a href="javascript:;">配送运费信息</a>
							</li>
							<li>
								<a href="javascript:;">生鲜速配运费标准</a>
							</li>
							<li>
								<a href="javascript:;">订单处理时间</a>
							</li>
							<li>
								<a href="javascript:;">验货与拒收政策</a>
							</li>
							<li>
								<a href="javascript:;">用券订单结算说明</a>
							</li>
						</ul>
					</div>
					<div class="fl footrer-top-content">
						<h5 class="footer-h5 mb5"><a href="javascript:;">温馨提示</a></h5>
						<ul>
							<li>
								<a href="javascript:;">找回密码</a>
							</li>
							<li>
								<a href="javascript:;">联系我们</a>
							</li>
							<li>
								<a href="javascript:;">常见问题热点</a>
							</li>
							<li>
								<a href="javascript:;">顾客意见</a>
							</li>
							<li>
								<a href="javascript:;">关于跨境购</a>
							</li>
						</ul>
					</div>
				</div>
				<!--尾部-->
				<div id="footer-bottom">
					<p class="footer-p">
						<span><a href="javascript:;">关于我们</a></span>
						<span>|</span>
						<span><a href="javascript:;">免费条款</a></span>
						<span>|</span>
						<span><a href="javascript:;">中粮集团</a></span>
						<span>|</span>
						<span><a href="javascript:;">友情链接</a></span>
						<span>|</span>
						<span><a href="javascript:;">搜索热词</a></span>
						<span>|</span>
						<span><a href="javascript:;">实物购物券</a></span>
						<span>|</span>
						<a href="javascript:;">客服电话：400-005-5678</a>
					</p>
					<p>
						<span><a href="javascript:;"><img src="img/beian.png"/>京公网安备 11010102000458号</a></span>
						<span>|</span>
						<span>京ICP备 13003995号</span>
						<span>|</span>
						<span>营业执照（统一社会信用代码）91110000055590239L</span>
						<span>|</span>
						<span>食品经营许可证：JY11105020028185</span>
						<span>|</span>
						<span>Copyright&copy;2009-2017 我买网上购物 版权所有</span>
					</p>
				</div>
			</div>
			<!--//这里时下一个布局-->

		</div>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
		<script src="js/distpicker.data.js" type="text/javascript"></script>
		<script src="js/distpicker.js" type="text/javascript"></script>
		<script src="js/main.js" type="text/javascript"></script>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/compound.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				//判断登没登陆
				//云端读取数据
				var APP_ID = 'isetgclNbinuVRR2cWjIAsc2-gzGzoHsz';
				var APP_KEY = 'iB12WgD1FTr8FGQNB0JSsrah';
				AV.init({
					appId: APP_ID,
					appKey: APP_KEY
				});
				var currentUser = AV.User.current();
				if(currentUser) {
					console.log(currentUser._serverData.username);
					//console.log("是当前用户")
					//$("#name").html(currentUser._serverData.username);
					// 跳转到首页
				} else {
					//currentUser 为空时，可打开用户注册界面…
					location.href = "register.html";
					//		console.log("不是当前用户");
				}
				//判断登没登陆结束

				$(".header-you-html1").mouseover(function() {
					$(this).find("i").attr("class", "iconfont icon-less");
					$(this).find("div").show();
				}).mouseout(function() {
					$(this).find("i").attr("class", "iconfont icon-moreunfold");
					$(this).find("div").hide();
				});
				//以下为左右箭头的悬浮效果
				$("#shopping-jingpinshangpin").mouseover(function() {
					$(".icon-zuojiantou").show();
					$(".icon-youjiantou").show();
					$(".icon-zuojiantou").css("cursor", "pointer");
					$(".icon-youjiantou").css("cursor", "pointer");
				}).mouseout(function() {
					$(".icon-zuojiantou").hide();
					$(".icon-youjiantou").hide();
				});
				$(".tuijian-1").mouseover(function() {
					$(".icon-zuojiantou").show();
					$(".icon-youjiantou").show();
					$(".icon-zuojiantou").css("cursor", "pointer");
					$(".icon-youjiantou").css("cursor", "pointer");
				}).mouseout(function() {
					$(".icon-zuojiantou").hide();
					$(".icon-youjiantou").hide();
				});
				//以下为我的收藏时悬浮时的隐藏与显示 	
				$(".jingpin-1").bind("mouseover", function(event) {
					event.stopPropagation();
					event.preventDefault();
					$(this).css({
						"background-color": "gray",
						"color": "white"
					});

					$(this).find("div").css("color", "black");
				}).bind("mouseout", function() {
					$(this).css("background-color", "#EFEFEF").css("color", "black");
				}).bind("click", function() {
					$(".jingpin-1").css("background-color", "#EFEFEF").css("color", "black");
					$(this).css("background-color", "#A40E59").css("color", "white");
					$(".tuijian-1").hide();
					$(this).find("div").show();
					$(this).find("div").css("color", "gray");
					$(".shangpin-html-html").hide();
					//先关闭悬浮时的效果
					$(this).off("mouseover mouseout");
					$(".jingpin-1").not($(this)).bind("mouseover", function() {
						$(this).css("background-color", "gray").css("color", "white");
					}).bind("mouseout", function() {
						$(this).css("background-color", "#EFEFEF").css("color", "black");
					});
				});
				$("#jingpin-1-1").click();
				//省市级联动
				$("#distpicker2").distpicker({
					province: "---- 所在省 ----",
					city: "---- 所在市 ----",
					district: "---- 所在区 ----"
				});
				//点击上下按钮的事件
				$('.scroll-chevron').click(function() { //给上下按钮加点击事件
					var sinput = $(this).parents('.scroll-btn').find('.scroll-txt'); //给input定义变量
					if($(this).hasClass('glyphicon-chevron-up')) { //判断点击按钮是否有class：glyphicon-chevron-up
						sinput.val(parseInt(sinput.val()) + 1); //有，为input中的值加1
					} else {
						if(parseInt(sinput.val()) < 2) { //判断input中得值是否小于1
							alert("已达到最低的数量值")
							return //是，停止动作
						}
						sinput.val(parseInt(sinput.val()) - 1); //否,让input中得值减1
					}
				});
			});
		</script>
	</body>

</html>